<template>
  <div class="FindPassword">
    <div
      class="login-topBar"
      style="width: 100%; position: absolute; top: 0;box-sizing: border-box;"
    >
      <top-bar></top-bar>
    </div>
    <div class="content">
      <div class="text">找回密码</div>
      <el-form :model="inputContent" ref="FindRuleForm" label-position="50px"   label-width="70px" class="demo-ruleForm">
        <el-form-item label="邮箱" prop="inputEmail" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]" class="emailClass">
          <el-input v-model="inputContent.inputEmail" placeholder="请输入与账号绑定的邮箱" class="email-reBack-password"
          ></el-input>
        </el-form-item>


        <el-row type="flex" align="middle" class="row-codeClass">
            <el-col :span="16">
              <el-form-item label="验证码" prop="inputIdentifyCode" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },]" class="codeClass">
                <el-input v-model="inputContent.inputIdentifyCode" placeholder="请输入验证码" class="message-reBack-code"></el-input>
              </el-form-item>
            </el-col>

          <el-col :span="8" >
            <div >
              <el-button type="info" round  @click="sendCode()" size="small">发送验证码</el-button>
            </div>
          </el-col>

        </el-row>


        <el-form-item label="新密码" prop="inputPassword"     :rules="[
      { required: true, message: '密码不能为空'},
    ]" type="password"  class="passwordClass">
          <el-input v-model="inputContent.inputPassword" placeholder="请输入新密码" class="password-reBack-new"></el-input>
        </el-form-item>


       
          <el-row>
            <el-col :span="18">
              <el-button size="medium" type="primary" @click="submitForm" >重 置 密 码</el-button>
            </el-col>
            <el-col :span="6" >
              <el-button   @click="handleEnterLogin">取消</el-button>
            </el-col>
          </el-row>
        
      </el-form>

 
    </div>
    <div class="login-copyRight">
      <copy-right></copy-right>
    </div>
  </div>
</template>

<script lang="ts">

import {Component, Vue} from "vue-property-decorator";
import SIdentify from "../components/identifyCode.vue";
import {Message} from "element-ui";
import topBar from "@/components/topBar.vue";
import copyRight from "@/components/copyRight.vue";
import { ResetPassword, getEncryptedAESKey, SendMail } from "@/apis/apis";
import rsaEncrypt from "@/utils/rsaEncrypt";
import crypto from "@/utils/crypto";

@Component({
  name: "FindPassword",
  components: {
    copyRight,
    topBar
  }
})
export default class FindPassword extends Vue {

  //找回密码的表单
  inputContent: {
    inputEmail: string;
    inputPassword: string;
    inputIdentifyCode: string;
  } = {
    inputEmail: "",
    inputPassword: "",
    inputIdentifyCode: "",
  };
  identifyCode: string = "";
  identifyCodeRandom: string = "1234567890abcdefjhijklinopqrsduvwxyz";

  // 创建4位的验证码
  makeIdentifyCode(identifyCodeRandom: string, length: number): string {
    let identifyCode = "";
    let identifyCodeRandomLength = identifyCodeRandom.length;
    for (let i = 0; i < length; i++) {
      identifyCode +=
          identifyCodeRandom[
              Math.floor(Math.random() * identifyCodeRandomLength)
              ];
    }
    console.log(identifyCode);
    this.identifyCode = identifyCode;
    console.log(this.identifyCode);
    return this.identifyCode
    // 打印输出验证码
   // console.log(this.identifyCode);
  }

  // 验证码输入判别
  identifyCodeJudge(): boolean {
    if (this.inputContent.inputIdentifyCode === this.identifyCode) {
      return true;
    } else {
      return false;
    }
  }

  refreshIdentifyCode(): string {
   return this.makeIdentifyCode(this.identifyCodeRandom, 4);
  }

  // 验证码异常输入处理
  handleIdentifyCodeErrorInput(): void {
    Message({
      message: "验证码错误，请重新输入",
      type: "error",
    });
  }

  sendCode():void{
    //接口
    SendMail(this.inputContent.inputEmail)
    .then((res)=>{
      if(res.data.code === "200") {
        Message.success("验证码发送成功")
      }
    })
  }



   submitForm():void {
    // 验证码在后端判别
    getEncryptedAESKey()
    .then((res)=>{
      if(res.data.code === "200") {
        let encryptedAESKey = res.data.data;
        //console.log(encryptedAESKey);
                // 调用rsa解密
        let decryptedAESKey = rsaEncrypt.decryptKey(
                  encryptedAESKey
                ) as string;  
        // console.log(decryptedAESKey);
        let encryptedNewPassword = crypto.encrypt(
       this.inputContent.inputPassword,
        decryptedAESKey);
ResetPassword(this.inputContent.inputEmail,this.inputContent.inputIdentifyCode,encryptedNewPassword)
    .then((res:any)=>{
      console.log(res)
      if(res.data.code==='200'){
        Message.success("验证码输入成功，已重置密码")
        //this.$router.push({ name: "login" });
        this.threeGo();
      }else{
        Message.error("验证码输入错误，请重新输入验证码")
      }
    })
     }
     })

  }


  //取消按钮
  handleEnterLogin(): void {
    // 创建路由对象
    //const route = this.$router.resolve({
      // 跳转到登录页面
      //path: "/Login",
      //query: {
      //},
    //});
    // 打开新页面
    //window.open(route.href, "_blank");
    if (this.notifyInfo("/login", "登录")) {
      this.$router.push({ name: "login" });
    }
  }
  count: any
  timer: any
  show: any

  //审核文章通过定时器
  threeGo() {
    this.$message({
      message:'审核通过!,3秒后将会跳转至审核列表',
      type:'success'
    });
    const TIME_COUNT = 3;
    if (!this.timer) {
      this.count = TIME_COUNT;
      this.show = false;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          //跳转的页面写在此处
          this.$router.push({
            path: 'login'
          });
        }
      }, 1000)
    }
  }

  notifyInfo(link: string, words: string): Boolean {
    // console.log(this.$route);
    if (this.$route.path == link) {
      this.$notify({
        title: "提示",
        message: "您当前已经在" + words + "页面",
        type: "warning",
        offset: 50,
        duration: 3000,
      });
      return false;
    }
    return true;
  }



}
</script>

<style lang="scss" scoped>



.FindPassword {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  // 云海
  background: url("../../assets/login/background/Sea of Clouds-12.5s-2328px.svg") no-repeat center center fixed;
  // 条带
  // background: url("../assets/login/background/Valley-10s-1397px.svg") no-repeat center center fixed;
  background-size: cover;

  .content {
    width: 330px;
    padding: 40px 25px;
    background: #dde1e7;
    // background: rgba(221, 225, 231, 0.5);
    border-radius: 10px;
    box-shadow: -3px -3px 7px #ffffff73, 2px 2px 5px rgba(94, 104, 121, 0.288);


    .text {
      font-size: 33px;
      font-weight: 600;
      margin-bottom: 35px;
      color: #595959;
      text-shadow: 2px 2px 5px #ffffff73,
      -2px -2px 5px rgba(94, 104, 121, 0.288);
    }
    .demo-ruleForm{
      .row-codeClass{
        ::v-deep(.el-form-item){
          margin: 0px
        ;
        }

      }

      .email-reBack-password{
        ::v-deep(.el-input__inner){
          //border: 1px solid green;
          //margin-right: 100px
          border-radius: 10px;
        ;
        }
      }
      .message-reBack-code{
        ::v-deep(.el-input__inner){
          border-radius: 10px;
        ;
        }
      }

      .password-reBack-new{
        ::v-deep(.el-input__inner){
          border-radius: 10px;
        ;
        }
      }
      .emailClass{
        ::v-deep(.el-form-item__label){
          text-align:left;
        }
      }

      .codeClass{
        ::v-deep(.el-form-item__label){
          text-align:left;
        }

      }

      .passwordClass{
        ::v-deep(.el-form-item__label){
          text-align:left;
        }
      }
    }

    // 设置表单项之间的间隔
    .el-row {
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .field {
      height: 50px;
      width: 100%;
      display: flex;
      position: relative;

      .input {
        height: 100%;
        width: 100%;
        padding-left: 45px;
        outline: none;
        border: none;
        font-size: 18px;
        background: #dde1e7;
        color: #595959;
        border-radius: 25px;
        box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #ffffff73;
      }

      .input:focus {
        box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #ffffff73;
      }

      .span {
        position: absolute;
        color: #595959;
        width: 50px;
        line-height: 55px;
      }

      .label {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 45px;
        pointer-events: none;
        color: #666666;
      }

      .input:valid ~ label {
        opacity: 0;
      }
    }

    .forgot-pass {
      text-align: left;
      margin: 10px 0 10px 5px;

      a {
        font-size: 16px;
        color: #549ad8;
        text-decoration: none;
      }
    }

    .forgot-pass:hover a {
      text-decoration: underline;
    }

    .button {
      margin: 15px 0;
      width: 100%;
      height: 50px;
      font-size: 18px;
      line-height: 50px;
      font-weight: 600;
      background: #dde1e7;
      border-radius: 25px;
      border: none;
      outline: none;
      // 鼠标移入时的样式
      cursor: pointer;
      color: #595959;
      box-shadow: 2px 2px 5px #babecc, -5px -5px 10px #ffffff73;
    }

    .button:focus {
      color: #3498db;
      box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #ffffff73;
    }

  }

  .login-copyRight {
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
    width: 100%;
  }
}
</style>